<template>
  <div class="container coupon">
    <van-nav-bar
      title=""
      left-text=""
      right-text="添加"
      @click-right="onClickRight"
    />
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="coupon-list-row">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多数据了"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              @load="getMyCoupon"
            >
              <div class="flex coupon-list" v-for="(item,index) in couponList" :key="index">
                <div style="width:100px;">
                  <van-image :src="item.FileUrl" width="80px" height="60px" fit="contain" style="background-color: #f1f1f1;" @click="showImage(index)">
                    <template v-slot:error>加载失败</template>
                  </van-image>
                </div>
                <div class="flex-1">
                  <div class="coupon-name flex" style="margin-top:5px;">
                    <div class="flex-1" style="color:#f60">{{item.Amount}}元</div>
                    <div class="flex-1 text-right" v-if="item.ApplyState==0" style="color:#999;font-size:14px;">{{item.ApplyStateStr}}</div>
                    <div class="flex-1 text-right" v-if="item.ApplyState==1" style="color:#07c160;font-size:14px;">{{item.ApplyStateStr}}</div>
                    <div class="flex-1 text-right" v-if="item.ApplyState==2" style="color:#ee0a24;font-size:14px;">{{item.ApplyStateStr}}</div>
                  </div>
                  <div class="text" style="margin-top:5px;">申请时间：{{item.CreateTime}}</div>
                  <div class="text" style="margin-top:5px;" v-if="item.ApplyState==2">拒绝原因：{{item.Reason}}</div>
                </div>
              </div>
            </van-list>
          </div>
        </van-pull-refresh>
    
    <van-image-preview
      v-model="show"
      :images="images"
      @change="onChange"
    >
      <template v-slot:index>第{{ index }}页</template>
    </van-image-preview>
  </div>
</template>

<script>
//import { msToDate } from '@/until/until';
export default {
  name: 'applyIntegralList',
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      error: false,
      couponList:[],
      active: 0,
      pageIndex:0,
      pageSize:10,
      show: false,
      index: 0,
      images: []
    };
  },
  mounted() {
  },
  methods: {
     onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight(){
      this.$router.push({
          path: '/applyIntegral',
      })
    },
    onChange(index) {
      this.index = index;
    },
    showImage(index){
      this.show = true;
      this.index = index
    },
    onRefresh() {
      setTimeout(() => {
        this.pageIndex = 0;
        this.getMyCoupon();
        this.$toast('刷新成功');
        this.isLoading = false;
        this.finished = false;
      }, 500);
    },
    getMyCoupon(){
      this.$api.mine.getApplysIntegralsList({ 
          ApplyState:'',
          SourceType:1, 
          PageIndex:++this.pageIndex,
          PageSize:this.pageSize   
      }).then(res=> {
        this.loading = false;
        let data = res.Data;
        if(data.PageIndex==1){
          this.couponList = data.Data;
        }else{
          this.couponList = this.couponList.concat(data.Data);
        }
        if (this.couponList.length >= data.TotalNum) {
          this.finished = true;
        }
        for(let i=0;i<this.couponList.length;i++){
          this.images.push(this.couponList[i].FileUrl);
        }
      }).catch(() => {
        this.error = true;
      })      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.coupon {
  height: auto;
  .coupon-list-row {
    padding: .533333rem .266667rem;
    .coupon-list {
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
      padding: .266667rem;
      margin-bottom: .266667rem;
      .coupon-name {
        font-size: .426667rem;
      }
      .text {
        font-size: .32rem;
        color: #999;
      }
      .coupon-money-row {
        color:#f44;
        font-size: .373333rem;
        .coupon-money {
          font-size: .64rem;
        }
      }
    }
  }
}
</style>